<template>
	<view class="index">
		<!-- 倒计时 -->
		<view class="index-header">
			<view class="index-header-top">
				距离
				<text class="text">
					<!-- {{name}} -->
					软考
				</text>
			</view>
			<view class="index-header-bottom">
				还有
				<text class="t">{{days}}</text>
				天
				<text class="t">{{hours}}</text>
				小时
				<text class="t">{{minutes}}</text>
				分钟
				<text class="t">{{seconds}}</text>
				秒
			</view>
		</view>

		<!-- 轮播图 -->
		<view class="index-banner">
			<swiper circular="true" @change="changeImageFn" :current="num">
				<swiper-item v-for="item in banners" :key="item.id">
					<view class="swiper-item">
						<navigator url="/pages/resume/resume">
							<view class="box">
								<view><text class="text">{{item.text}}</text></view>
								<image class="img" :src="item.src" mode="widthFix"></image>
							</view>
						</navigator>
					</view>
				</swiper-item>
			</swiper>
			<view class="ul" v-if="false">
				<view v-for="(item,index) in 1" :class="['li',num==index ? 'active':'']"></view>
			</view>
		</view>

		<!-- 导航（刷题 | 考试） -->
		<view class="index-nav">
			<view class="index-nav-left" @click="jumpToCateFn">
				<view class="tit">刷题</view>
				<image class="ico" src="/static/img/icon-topic.png" mode="widthFix"></image>
			</view>
			<view class="index-nav-right" @click="jumpToPaperListFn">
				<view class="tit">考试</view>
				<image class="ico" src="/static/img/icon-exam.png" mode="widthFix">
				</image>
			</view>
		</view>

		<!-- 签到 -->
		<view class="index-clock">
			<view class="index-clock-box">
				<!-- 日历 -->
				<calendar></calendar>
			</view>
		</view>
	</view>
</template>

<script>
	import calendarVue from '../../components/calendar/calendar.vue';
	export default {
		components: {
			calendar: calendarVue
		},
		data() {
			return {
				num: 0,
				banners: [{
					src: "https://mp-f4011f50-7780-4aca-b10a-2323b1bbdf66.cdn.bspapp.com/banners/1.jpg",
					id: 1,
					text: "简历制作"
				}],
				days: 0,
				hours: 0,
				minutes: 0,
				seconds: 0,
				name: "元旦",
				datetime: "2026-01-01 00:00:00"
			}
		},
		onLoad() {
			// 初始化
			// this.getHolidayFn()
			// 	.then(
			// 		() => {
			// 			// 倒计时
			// 			this.downTimeFn(this.datetime);
			// 		}
			// 	)
		},
		methods: {
			change(e) {
				console.log(e);
			},
			// 倒计时
			downTimeFn(datetime) {
				const d1 = new Date() // 当前日期对象
				const d2 = new Date(datetime) //未来的日期对象
				let nowTime = d1.getTime() //现在的时间戳
				let futureTime = d2.getTime() // 节日的时间戳
				let times = futureTime - nowTime
				if (times < 0) return false;
				// 计算天数 小时数 分钟数  秒数
				let s = times / 1000
				this.days = Math.floor(s / 3600 / 24)
				this.hours = Math.floor(s / 3600 % 24)
				this.minutes = Math.floor(s % 3600 / 60)
				this.seconds = Math.floor(s % 60)
			},
			// 获取节日信息
			async getHolidayFn() {
				await uniCloud.callFunction({
						name: 'holiday'
					})
					.then(
						resData => {
							// console.log(resData)
							if (resData.result && resData.result.data) {
								let data = resData.result.data;
								this.name = data[0].name;
								this.datetime = data[0].datetime;
							}
						}
					)
					.catch(err => {
						console.log(err)
					})
			},


			changeImageFn(event) {
				// console.log(event.detail.current);
				// 赋值
				this.num = event.detail.current;
			},
			jumpToCateFn() {
				uni.navigateTo({
					url: "/pages/cate/cate"
				})
			},
			jumpToPaperListFn() {
				uni.navigateTo({
					url: "/pages/paperlist/paperlist"
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "../../static/scss/variable.scss";

	.index {
		padding: $padd;
	}

	.index-header {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 36rpx;
		margin-bottom: 20rpx;

		.text {
			font-weight: bold;
			font-size: 56rpx;
		}

		.t {
			font-weight: bold;
		}
	}

	.index-banner {
		margin-bottom: 20rpx;

		swiper {
			height: 288rpx;
		}

		.box {
			height: 288rpx;
			background-color: #f0f0f0;
			border-radius: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
			position: relative;

			.img {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				border-radius: 20rpx;
			}

			.text {
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
				z-index: 100;
				width: 100%;
				font-size: 40rpx;
				font-weight: bold;
				color: rgba(255, 255, 255, .85);
				padding: 20rpx;
				box-sizing: border-box;
				text-align: center;
			}
		}

		.ul {
			padding: 20rpx 0rpx;
			display: flex;
			width: 100%;
			justify-content: center;
			align-items: center;

			.li {
				width: 40rpx;
				height: 10rpx;
				background-color: #bfbfbf;
				margin: 0 10rpx;
				border-radius: 10rpx;
				transition: all .5s;

				&.active {
					background-color: $theme-color;
					width: 80rpx;
				}
			}
		}
	}

	.index-nav {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: 300rpx;
		column-gap: 20rpx;
		margin-bottom: 20rpx;

		.index-nav-left,
		.index-nav-right {
			// border: 1px solid #ccc;
			padding: 60rpx 0rpx;
			text-align: center;
			border-radius: 10rpx;
			box-shadow: 0px 0px 5px #ccc;

			.tit {
				margin-bottom: 20rpx;
			}

			.ico {
				width: 80rpx;
				height: 80rpx;
			}
		}
	}

	.index-clock-box {
		margin-top: 20rpx;
		padding: 20rpx 20rpx;
		min-height: 400rpx;
		border: 1px solid #f0f0f0;
		box-sizing: border-box;
	}
</style>